<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嘈杂的声音</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap");

        * {
            padding: 0;
            margin: 0 auto;
            box-sizing: border-box
        }

        body {
            background-image: radial-gradient(circle, #333, #000 800px);
            min-height: 100vh;
            display: grid;
            place-items: center
        }

        .noise {
            position: relative;
            width: 287px;
            height: 36px;
            border: none;
            background: none;
            font-family: "Josefin Sans", sans-serif;
            font-size: 24px;
            color: #fff;
            cursor: pointer
        }

        .noise::after {
            content: "Hover for Noise";
            opacity: var(--op, 1);
            transition: opacity 0.4s
        }

        .noise > i {
            position: absolute;
            left: var(--left, 0);
            top: 50%;
            width: 3px;
            height: 72px;
            transform: translateY(-50%) scaleY(var(--sy, 0));
            z-index: -1;
            transition: transform var(--duration) ease-out
        }

        .noise > i::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(#fff, hsl(var(--hue, 0), 75%, 75%));
            border-radius: 50%;
            -webkit-animation: noise var(--duration) infinite ease-in-out alternate;
            animation: noise var(--duration) infinite ease-in-out alternate;
            -webkit-animation-play-state: var(--aps, paused);
            animation-play-state: var(--aps, paused)
        }

        @-webkit-keyframes noise {
            0% {
                transform: scaleY(calc(1 - (var(--size, 0))))
            }
            100% {
                transform: scaleY(calc(1 + (var(--size, 0))))
            }
        }

        @keyframes noise {
            0% {
                transform: scaleY(calc(1 - (var(--size, 0))))
            }
            100% {
                transform: scaleY(calc(1 + (var(--size, 0))))
            }
        }

        .noise > i:nth-child(1) {
            --left: 0px;
            --duration: 247ms;
            --size: 0.118;
            --hue: 0
        }

        .noise > i:nth-child(2) {
            --left: 4px;
            --duration: 293ms;
            --size: 0.057;
            --hue: 5
        }

        .noise > i:nth-child(3) {
            --left: 8px;
            --duration: 372ms;
            --size: 0.979;
            --hue: 10
        }

        .noise > i:nth-child(4) {
            --left: 12px;
            --duration: 375ms;
            --size: 0.666;
            --hue: 15
        }

        .noise > i:nth-child(5) {
            --left: 16px;
            --duration: 222ms;
            --size: 0.756;
            --hue: 20
        }

        .noise > i:nth-child(6) {
            --left: 20px;
            --duration: 268ms;
            --size: 0.563;
            --hue: 25
        }

        .noise > i:nth-child(7) {
            --left: 24px;
            --duration: 296ms;
            --size: 0.358;
            --hue: 30
        }

        .noise > i:nth-child(8) {
            --left: 28px;
            --duration: 277ms;
            --size: 0.808;
            --hue: 35
        }

        .noise > i:nth-child(9) {
            --left: 32px;
            --duration: 365ms;
            --size: 0.463;
            --hue: 40
        }

        .noise > i:nth-child(10) {
            --left: 36px;
            --duration: 258ms;
            --size: 0.896;
            --hue: 45
        }

        .noise > i:nth-child(11) {
            --left: 40px;
            --duration: 388ms;
            --size: 0.499;
            --hue: 50
        }

        .noise > i:nth-child(12) {
            --left: 44px;
            --duration: 286ms;
            --size: 0.027;
            --hue: 55
        }

        .noise > i:nth-child(13) {
            --left: 48px;
            --duration: 305ms;
            --size: 0.724;
            --hue: 60
        }

        .noise > i:nth-child(14) {
            --left: 52px;
            --duration: 280ms;
            --size: 0.275;
            --hue: 65
        }

        .noise > i:nth-child(15) {
            --left: 56px;
            --duration: 306ms;
            --size: 0.634;
            --hue: 70
        }

        .noise > i:nth-child(16) {
            --left: 60px;
            --duration: 377ms;
            --size: 0.845;
            --hue: 75
        }

        .noise > i:nth-child(17) {
            --left: 64px;
            --duration: 278ms;
            --size: 0.031;
            --hue: 80
        }

        .noise > i:nth-child(18) {
            --left: 68px;
            --duration: 363ms;
            --size: 0.551;
            --hue: 85
        }

        .noise > i:nth-child(19) {
            --left: 72px;
            --duration: 243ms;
            --size: 0.523;
            --hue: 90
        }

        .noise > i:nth-child(20) {
            --left: 76px;
            --duration: 273ms;
            --size: 0.307;
            --hue: 95
        }

        .noise > i:nth-child(21) {
            --left: 80px;
            --duration: 310ms;
            --size: 0.817;
            --hue: 100
        }

        .noise > i:nth-child(22) {
            --left: 84px;
            --duration: 278ms;
            --size: 0.695;
            --hue: 105
        }

        .noise > i:nth-child(23) {
            --left: 88px;
            --duration: 327ms;
            --size: 0.105;
            --hue: 110
        }

        .noise > i:nth-child(24) {
            --left: 92px;
            --duration: 384ms;
            --size: 0.427;
            --hue: 115
        }

        .noise > i:nth-child(25) {
            --left: 96px;
            --duration: 288ms;
            --size: 0.821;
            --hue: 120
        }

        .noise > i:nth-child(26) {
            --left: 100px;
            --duration: 292ms;
            --size: 0.704;
            --hue: 125
        }

        .noise > i:nth-child(27) {
            --left: 104px;
            --duration: 341ms;
            --size: 0.364;
            --hue: 130
        }

        .noise > i:nth-child(28) {
            --left: 108px;
            --duration: 398ms;
            --size: 0.467;
            --hue: 135
        }

        .noise > i:nth-child(29) {
            --left: 112px;
            --duration: 393ms;
            --size: 0.074;
            --hue: 140
        }

        .noise > i:nth-child(30) {
            --left: 116px;
            --duration: 220ms;
            --size: 0.238;
            --hue: 145
        }

        .noise > i:nth-child(31) {
            --left: 120px;
            --duration: 213ms;
            --size: 0.458;
            --hue: 150
        }

        .noise > i:nth-child(32) {
            --left: 124px;
            --duration: 387ms;
            --size: 0.808;
            --hue: 155
        }

        .noise > i:nth-child(33) {
            --left: 128px;
            --duration: 258ms;
            --size: 0.83;
            --hue: 160
        }

        .noise > i:nth-child(34) {
            --left: 132px;
            --duration: 349ms;
            --size: 0.236;
            --hue: 165
        }

        .noise > i:nth-child(35) {
            --left: 136px;
            --duration: 372ms;
            --size: 0.673;
            --hue: 170
        }

        .noise > i:nth-child(36) {
            --left: 140px;
            --duration: 368ms;
            --size: 0.204;
            --hue: 175
        }

        .noise > i:nth-child(37) {
            --left: 144px;
            --duration: 248ms;
            --size: 0.353;
            --hue: 180
        }

        .noise > i:nth-child(38) {
            --left: 148px;
            --duration: 367ms;
            --size: 0.819;
            --hue: 185
        }

        .noise > i:nth-child(39) {
            --left: 152px;
            --duration: 332ms;
            --size: 0.091;
            --hue: 190
        }

        .noise > i:nth-child(40) {
            --left: 156px;
            --duration: 274ms;
            --size: 0.972;
            --hue: 195
        }

        .noise > i:nth-child(41) {
            --left: 160px;
            --duration: 315ms;
            --size: 0.647;
            --hue: 200
        }

        .noise > i:nth-child(42) {
            --left: 164px;
            --duration: 278ms;
            --size: 0.806;
            --hue: 205
        }

        .noise > i:nth-child(43) {
            --left: 168px;
            --duration: 206ms;
            --size: 0.976;
            --hue: 210
        }

        .noise > i:nth-child(44) {
            --left: 172px;
            --duration: 235ms;
            --size: 0.028;
            --hue: 215
        }

        .noise > i:nth-child(45) {
            --left: 176px;
            --duration: 312ms;
            --size: 0.183;
            --hue: 220
        }

        .noise > i:nth-child(46) {
            --left: 180px;
            --duration: 229ms;
            --size: 0.983;
            --hue: 225
        }

        .noise > i:nth-child(47) {
            --left: 184px;
            --duration: 260ms;
            --size: 0.958;
            --hue: 230
        }

        .noise > i:nth-child(48) {
            --left: 188px;
            --duration: 361ms;
            --size: 0.18;
            --hue: 235
        }

        .noise > i:nth-child(49) {
            --left: 192px;
            --duration: 286ms;
            --size: 0.346;
            --hue: 240
        }

        .noise > i:nth-child(50) {
            --left: 196px;
            --duration: 214ms;
            --size: 0.174;
            --hue: 245
        }

        .noise > i:nth-child(51) {
            --left: 200px;
            --duration: 202ms;
            --size: 0.883;
            --hue: 250
        }

        .noise > i:nth-child(52) {
            --left: 204px;
            --duration: 354ms;
            --size: 0.701;
            --hue: 255
        }

        .noise > i:nth-child(53) {
            --left: 208px;
            --duration: 385ms;
            --size: 0.294;
            --hue: 260
        }

        .noise > i:nth-child(54) {
            --left: 212px;
            --duration: 366ms;
            --size: 0.66;
            --hue: 265
        }

        .noise > i:nth-child(55) {
            --left: 216px;
            --duration: 312ms;
            --size: 0.137;
            --hue: 270
        }

        .noise > i:nth-child(56) {
            --left: 220px;
            --duration: 268ms;
            --size: 0.295;
            --hue: 275
        }

        .noise > i:nth-child(57) {
            --left: 224px;
            --duration: 345ms;
            --size: 0.629;
            --hue: 280
        }

        .noise > i:nth-child(58) {
            --left: 228px;
            --duration: 325ms;
            --size: 0.881;
            --hue: 285
        }

        .noise > i:nth-child(59) {
            --left: 232px;
            --duration: 202ms;
            --size: 0.324;
            --hue: 290
        }

        .noise > i:nth-child(60) {
            --left: 236px;
            --duration: 219ms;
            --size: 0.06;
            --hue: 295
        }

        .noise > i:nth-child(61) {
            --left: 240px;
            --duration: 279ms;
            --size: 0.269;
            --hue: 300
        }

        .noise > i:nth-child(62) {
            --left: 244px;
            --duration: 348ms;
            --size: 0.83;
            --hue: 305
        }

        .noise > i:nth-child(63) {
            --left: 248px;
            --duration: 347ms;
            --size: 0.341;
            --hue: 310
        }

        .noise > i:nth-child(64) {
            --left: 252px;
            --duration: 230ms;
            --size: 0.401;
            --hue: 315
        }

        .noise > i:nth-child(65) {
            --left: 256px;
            --duration: 399ms;
            --size: 0.417;
            --hue: 320
        }

        .noise > i:nth-child(66) {
            --left: 260px;
            --duration: 320ms;
            --size: 0.278;
            --hue: 325
        }

        .noise > i:nth-child(67) {
            --left: 264px;
            --duration: 213ms;
            --size: 0.687;
            --hue: 330
        }

        .noise > i:nth-child(68) {
            --left: 268px;
            --duration: 251ms;
            --size: 0.727;
            --hue: 335
        }

        .noise > i:nth-child(69) {
            --left: 272px;
            --duration: 326ms;
            --size: 0.702;
            --hue: 340
        }

        .noise > i:nth-child(70) {
            --left: 276px;
            --duration: 259ms;
            --size: 0.176;
            --hue: 345
        }

        .noise > i:nth-child(71) {
            --left: 280px;
            --duration: 372ms;
            --size: 0.349;
            --hue: 350
        }

        .noise > i:nth-child(72) {
            --left: 284px;
            --duration: 228ms;
            --size: 0.631;
            --hue: 355
        }

        .noise:hover {
            --sy: 1;
            --aps: running;
            --op: 0
        }
    </style>
</head>

<body>

<button class="noise">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i>
</button>

</body>

</html>